<template>
  <view class="game-container">
    <!-- 顶部信息 -->
    <view class="game-header">
      <view class="score-box">
        <text class="score-label">当前积分</text>
        <text class="score-value">{{ userScore }}</text>
      </view>
      <button class="reset-btn" @tap="resetGame">
        <text class="bi bi-arrow-clockwise"></text> 重新开始
      </button>
    </view>

    <!-- 鼓励文字 -->
    <view class="encourage-text animate__animated" :class="encourageClass">
      {{ encourageText }}
    </view>

    <!-- 游戏区域 -->
    <view class="game-board">
      <view 
        v-for="(item, index) in gameCards" 
        :key="index"
        class="card-item"
        :class="{ 
          'selected': selectedCards.includes(index),
          'matched': item.matched,
          'animate__animated': true,
          'animate__flipOutY': item.matched && item.animate,
          'animate__pulse': selectedCards.includes(index)
        }"
        @tap="selectCard(index)"
      >
        <image 
          :src="item.image" 
          mode="aspectFill" 
          class="card-image"
          v-if="!item.matched"
        />
      </view>
    </view>
  </view>

  <!-- 添加向下滑动指引 -->
  <view class="scroll-guide" @tap="scrollToAvatarList">
    <text class="bi bi-chevron-double-down"></text>
    <text class="guide-text">查看科学家介绍</text>
  </view>

  <!-- 添加头像和介绍列表 -->
  <view class="avatar-list" id="avatarList">
    <view 
      v-for="(item, index) in avatarDec" 
      :key="index"
      class="avatar-item"
      @tap="toggleDescription(index)"
    >
      <view class="avatar-info">
        <image 
          :src="store.avatarOptions[index]" 
          mode="aspectFill" 
          class="avatar-image"
        />
        <view class="avatar-text">
          <text class="avatar-name">{{ item.name }}</text>
          <text class="avatar-desc" :class="{ 'expanded': expandedIndex === index }">
            {{ item.description }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { useUserStore } from '@/stores/userStore'

const store = useCounterStore()
const userStore = useUserStore()

// 使用userStore中的积分
const userScore = computed(() => userStore.userInfo?.score || 0)

// 游戏数据
const gameCards = ref([])
const selectedCards = ref([])
const matchedPairs = ref(0)
const encourageText = ref('开始消除相同的傩面吧！')
const encourageClass = ref('')

// 鼓励文字库
const encourageTexts = {
  start: ['开始寻找相同的物理学家吧！', '让我们一起探索物理学家文化！'],
  match: ['太棒了！', '好眼力！', '完美配对！', '继续加油！'],
  combo: ['连击！真厉害！', '太强了！', '你太懂物理学家文化了！'],
  complete: ['恭喜通关！', '你是物理学家文化达人！']
}
const avatarDec=[{
 
 name: "墨枢·宋小星",
 description:
   "宋应星（1587年—约1666年），字长庚，江西奉新人，明代著名科学家、农学家和思想家。他自幼聪颖，早年科举屡试不第，后转向实学，游历各地考察民生工艺，晚年隐居著述。其代表作《天工开物》系统总结了明末农业、手工业技术，被誉为中国17世纪的工艺百科全书，另著有《论气》《谈天》等科学著作，展现了朴素的唯物主义思想，对后世科技发展影响深远。",

},
{

 name: "墨枢·墨小子",
 description:
   "墨子（约前470—前391），名翟，战国初期思想家、政治家，墨家学派创始人。出身平民，精通手工技艺，早年学儒后自创墨家，主张兼爱非攻尚贤节用，反对战争与奢侈。他带领弟子奔走列国，以逻辑辩论和防御战术闻名，曾成功阻止楚国攻宋。墨家组织严密，崇尚实践，与儒家并称显学。其思想载于《墨子》，包含哲学、科学、军事等内容，对中国逻辑学与工程技术有重要贡献。",

},
{

 name: "墨枢·徐小启",
 description:
   "徐光启（1562—1633），明代著名科学家、农学家、政治家，字子先，号玄扈，上海人。他早年科举入仕，官至礼部尚书兼文渊阁大学士，晚年致力于科学研究，与意大利传教士利玛窦合作翻译《几何原本》，引入西方数学知识，并编撰《农政全书》系统总结中国农业技术，推动中西文化交流，被誉为中国近代科学先驱。",

},
{

 name: "墨枢·沈小括",
 description:
   "沈括（1031—1095），字存中，号梦溪丈人，北宋著名科学家、政治家。他博学多才，在天文、数学、地理、物理、化学、医学等领域均有卓越贡献，代表作《梦溪笔谈》被誉为中国科学史上的里程碑。他参与王安石变法，历任提举司天监、翰林学士等职，晚年退居润州梦溪园潜心著述。其科学成就领先时代，如发现地磁偏角、提出石油命名等，展现了宋代科技的高度。",

},
{

 name: "墨枢·张小衡",
 description:
   "张衡（78年－139年），字平子，东汉著名科学家、文学家，南阳西鄂（今河南南阳）人。他精通天文、数学、机械制造，发明了世界最早的地动仪（候风地动仪）和浑天仪，提出浑天说，著有《灵宪》《算罔论》等科学著作；文学上以《二京赋》著称，擅长辞赋。曾任太史令，晚年任尚书，因病逝世。因其卓越贡献被后世尊为科圣，国际天文学联合会将月球背面一环形山命名为张衡山",

},]
// 初始化游戏
const initGame = () => {
  const cards = []
  const avatars = [...store.avatarOptions]
  
  // 创建12对卡片（24张）
  for (let i = 0; i < 24; i += 2) {
    const randomIndex = Math.floor(Math.random() * avatars.length)
    const selectedAvatar = avatars[randomIndex]
    
    // 创建一对相同的卡片
    cards.push({
      id: i,
      pairId: Math.floor(i/2),
      image: selectedAvatar,
      matched: false,
      animate: false,
      animationName: ''
    })
    cards.push({
      id: i + 1,
      pairId: Math.floor(i/2),
      image: selectedAvatar,
      matched: false,
      animate: false,
      animationName: ''
    })
  }
  
  // 随机排序
  cards.sort(() => Math.random() - 0.5)
  gameCards.value = cards
  selectedCards.value = []
  matchedPairs.value = 0
  showEncourageText('start')
}

// 添加积分函数
const addGameScore = (points) => {
  // 检查用户是否登录
  if (!userStore.isLoggedIn) {
    uni.showToast({
      title: '请先登录后再玩游戏',
      icon: 'none'
    });
    return;
  }
  
  // 更新用户积分
  userStore.updateUserScore(points);
  
  uni.showToast({
    title: `获得${points}积分`,
    icon: 'success',
    duration: 1500
  });
};

// 选择卡片
const selectCard = (index) => {
  const card = gameCards.value[index]
  
  // 如果已匹配或已选择，则返回
  if (card.matched || selectedCards.value.includes(index)) return
  
  // 如果已选择两张卡片，则返回
  if (selectedCards.value.length === 2) return
  
  // 添加选中效果
  selectedCards.value.push(index)
  
  // 如果选择了两张卡片
  if (selectedCards.value.length === 2) {
    const [firstIndex, secondIndex] = selectedCards.value
    const firstCard = gameCards.value[firstIndex]
    const secondCard = gameCards.value[secondIndex]
    
    // 检查是否匹配
    if (firstCard.image === secondCard.image) {
      // 匹配成功
      setTimeout(() => {
        // 标记为已匹配并添加动画
        gameCards.value[firstIndex].matched = true
        gameCards.value[secondIndex].matched = true
        gameCards.value[firstIndex].animate = true
        gameCards.value[secondIndex].animate = true
        
        matchedPairs.value++
        
        // 显示鼓励文字
        showEncourageText('match')
        
        // 增加积分 - 使用userStore
        addGameScore(10)
        
        // 清除选择
        selectedCards.value = []
        
        // 延迟添加新卡片
        setTimeout(() => {
          addNewCards()
        }, 500)
        
        // 检查是否达到目标
        if (matchedPairs.value >= 10) {
          showCongratulations()
        }
      }, 300)
    } else {
      // 不匹配时添加晃动动画
      setTimeout(() => {
        selectedCards.value = []
      }, 1000)
    }
  }
}

// 添加新卡片
const addNewCards = () => {
  const avatars = [...store.avatarOptions]
  const randomIndex = Math.floor(Math.random() * avatars.length)
  const selectedAvatar = avatars[randomIndex]
  
  // 创建一对新卡片
  const newPair = [
    {
      id: Date.now(),
      image: selectedAvatar,
      matched: false,
      animate: false
    },
    {
      id: Date.now() + 1,
      image: selectedAvatar,
      matched: false,
      animate: false
    }
  ]
  
  // 找到两个已匹配的位置添加新卡片
  let added = 0
  let matchedPositions = []
  
  // 先收集所有已匹配的位置
  gameCards.value.forEach((card, index) => {
    if (card.matched) {
      matchedPositions.push(index)
    }
  })
  
  // 随机选择两个位置添加新卡片
  if (matchedPositions.length >= 2) {
    matchedPositions = matchedPositions.sort(() => Math.random() - 0.5).slice(0, 2)
    matchedPositions.forEach((position, index) => {
      gameCards.value[position] = newPair[index]
    })
  }
}

// 显示鼓励文字
const showEncourageText = (type) => {
  const texts = encourageTexts[type]
  encourageText.value = texts[Math.floor(Math.random() * texts.length)]
  encourageClass.value = 'animate__bounceIn'
  
  setTimeout(() => {
    encourageClass.value = ''
  }, 1000)
}

// 显示祝贺弹窗
const showCongratulations = () => {
  uni.showModal({
    title: '恭喜通关！',
    content: '你真是太厉害了！获得额外20积分奖励！',
    showCancel: false,
    success: () => {
      // 使用userStore添加积分
      addGameScore(20)
      resetGame()
    }
  })
}

// 重置游戏
const resetGame = () => {
  initGame()
}

// 添加展开状态控制
const expandedIndex = ref(-1)

// 切换描述展开状态
const toggleDescription = (index) => {
  expandedIndex.value = expandedIndex.value === index ? -1 : index
}

// 添加滚动到列表的方法
const scrollToAvatarList = () => {
  uni.pageScrollTo({
    selector: '#avatarList',
    duration: 300
  })
}

// 初始化游戏
onMounted(() => {
  // 检查用户是否登录
  if (!userStore.isLoggedIn) {
    uni.showToast({
      title: '请先登录后再玩游戏',
      icon: 'none',
      duration: 2000
    });
    
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/other/login'
      });
    }, 2000);
    return;
  }
  
  // 确保用户信息中有积分字段
  if (userStore.userInfo && userStore.userInfo.score === undefined) {
    // 如果用户信息存在但积分字段不存在，初始化为0
    userStore.updateUserInfoLocal({
      score: 0
    });
  }
  
  initGame()
})
</script>

<style lang="scss" scoped>
.game-container {

  background: #f8f8f8;
  padding: 40rpx;
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.score-box {
  background: #fff;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  
  .score-label {
    font-size: 28rpx;
    color: #666;
    margin-right: 20rpx;
  }
  
  .score-value {
    font-size: 32rpx;
    font-weight: bold;
    color: var(--td-brand-color);
  }
}

.reset-btn {
  display: flex;
  align-items: center;
  gap: 10rpx;
  background: var(--td-brand-color);
  color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
  
  &:active {
    opacity: 0.9;
  }
}

.encourage-text {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  color: var(--td-brand-color);
  margin: 30rpx 0;
  min-height: 50rpx;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.card-item {
  aspect-ratio: 1;
  background: #f5f5f5;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
  cursor: pointer;
  
  &.selected {
    transform: scale(0.95);
    box-shadow: 0 0 0 4rpx var(--td-brand-color);
  }
  
  &.matched {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s ease;
  }
  
  .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
  }
  
  &:active {
    transform: scale(0.95);
  }
}

// 添加动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8) rotate(-10deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

// 确保动画库已引入
@import 'animate.css';

.avatar-list {
  margin-top: 40rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.avatar-item {
  margin-bottom: 30rpx;
  border-bottom: 2rpx solid #f5f5f5;
  padding-bottom: 20rpx;
  
  &:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }
}

.avatar-info {
  display: flex;
  align-items: flex-start;
  gap: 20rpx;
}

.avatar-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  object-fit: cover;
  border: 4rpx solid var(--td-brand-color);
}

.avatar-text {
  flex: 1;
}

.avatar-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.avatar-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.3s ease;
  
  &.expanded {
    -webkit-line-clamp: unset;
  }
}

.scroll-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
  margin: 40rpx 0;
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
    opacity: 0.8;
  }
  
  .bi {
    font-size: 40rpx;
    color: var(--td-brand-color);
    animation: bounce 2s infinite;
  }
  
  .guide-text {
    font-size: 28rpx;
    color: #666;
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20rpx);
  }
  60% {
    transform: translateY(-10rpx);
  }
}
</style> 